<template>
  <div class="box">
    <h2>Son1 子组件</h2>

    从vuex中获取的值: <label>{{ $store.state.count }}</label>

    <br>
    <button @click="addCount(1)">值 + 1</button>
    <button @click="addCount(3)">值 + 3</button>
    <button @click="addCount(4)">值 + 4</button>
    <div>--------------------</div>
    <button @click="asyncAddCount(100)">2s后+100</button>

  </div>

</template>

<script>
import { mapMutations, mapActions } from 'vuex'
export default {
  name: 'Son1Com',
  methods: {
    ...mapMutations(['addCount']),
    ...mapActions(['asyncAddCount']),
  }
}
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}

h2 {
  margin-top: 10px;
}
</style>
